<template>
  <input
    :type="props.type"
    class="szy-Input"
    :class="classes"
    @change="onChange"
    :disabled="props.banned"
  />
</template>

<script setup lang="ts">
import { computed } from "vue";
// Input组件接收不同的props 为表现不同的组件样式
const props = defineProps({
  banned: { type: Boolean, default: false },
  type: { type: String, default: "text" },
  size: { type: String, default: "normal" },
});

const classes = computed(() => {
  return [`szy-size-${props.size}`, `szy-type-${props.type}`];
});
const onChange = (e: any) => {
  console.log(e.target.value);
};
</script>

<style lang="scss">
$h: 14px;
$blue: #40a9ff;
.szy-Input {
  border: 1.5px solid #ddd;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.szy-size-small {
  font-size: 12px;
  width: 120px;
  height: 32px;
}
.szy-size-big {
  font-size: 28px;
  width: 300px;
  height: 60px;
}
.szy-Input:hover {
  border-color: #ccc;
}
.szy-Input:focus {
  outline: none;
  border-color: $blue;
}
.szy-type-range {
  padding: 0px;
}
</style>
